<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="chart-title">📊 今日出入货趋势</div>
          <v-chart class="chart" :option="inOutChartOption" autoresize />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="chart-title">🧱 今日货物分类占比</div>
          <v-chart class="chart" :option="categoryChartOption" autoresize />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt-4">
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="chart-title">📈 近7日出货量变化</div>
          <v-chart class="chart" :option="shipmentChartOption" autoresize />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="chart-title">🚚 当前车辆状态分布</div>
          <v-chart class="chart" :option="vehicleChartOption" autoresize />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { use } from 'echarts/core'
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart,
  LineChart,
  PieChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

const inOutChartOption = {
  tooltip: { trigger: 'axis' },
  legend: { data: ['入库', '出库'] },
  xAxis: { type: 'category', data: ['08:00','10:00','12:00','14:00','16:00','18:00'] },
  yAxis: { type: 'value' },
  series: [
    { name: '入库', type: 'bar', data: [50, 80, 60, 90, 70, 60] },
    { name: '出库', type: 'bar', data: [40, 60, 30, 80, 50, 70] }
  ]
}

const categoryChartOption = {
  tooltip: { trigger: 'item' },
  legend: { top: 'bottom' },
  series: [
    {
      type: 'pie',
      radius: ['30%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
      label: { show: false, position: 'center' },
      emphasis: { label: { show: true, fontSize: '16', fontWeight: 'bold' }},
      data: [
        { value: 1048, name: '混凝土' },
        { value: 735, name: '钢材' },
        { value: 580, name: '保温材料' },
        { value: 484, name: '砌体' }
      ]
    }
  ]
}

const shipmentChartOption = {
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['4/1','4/2','4/3','4/4','4/5','4/6','4/7'] },
  yAxis: { type: 'value' },
  series: [
    {
      name: '出货量',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210],
      smooth: true,
      areaStyle: {}
    }
  ]
}

const vehicleChartOption = {
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['待命','装货','运输','维修'] },
  yAxis: { type: 'value' },
  series: [
    { name: '车辆数', type: 'bar', data: [5, 8, 4, 1] }
  ]
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}
.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.chart {
  width: 100%;
  height: 300px;
}
.mt-4 {
  margin-top: 20px;
}
</style>
